<template>
  <div>
    <TableList :table-info="tableInfo"></TableList>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

import TableList from '@/components/common/table/TableList.vue'
import { ButtonType, IconType, SizeType, TableCellType } from '@/entity/enums/CommonType';
import TableCell from '@/entity/table/TableCell';
import TableContent from '@/entity/table/TableContent';
import TableHead from '@/entity/table/TableHead';
import TableListPageInfo from '@/entity/table/TableListPageInfo';
import TableRow from '@/entity/table/TableRow';
import ButtonInfo from '@/entity/button/ButtonInfo';
import { useRouter } from "vue-router";
import Service from '@/api/Service'
import ApiInfo from '@/api/index'
import MenuApi from '@/api/system/MenuApi';
import BackData from '@/entity/BackData';
import { StateInfo } from '@/entity/StateInfo';

const router = useRouter()

console.log(router, 'router')

// 新增
const onCreate = (scope) => {
  console.log(scope)
  console.log('新增')
  // router.push('/Menu/menuEdits')
}

const onRefresh = () => {
  console.log('刷新')
}

const onUpdate = (name: string) => {
  console.log('编辑', name)
  console.log(name)
}

const onDelete = (name: any) => {
  console.log('删除', name)
  console.log(name)
}

const tableJson = {
  headButton: [
    new ButtonInfo(ButtonType.primary, SizeType.small, onCreate, "新增", IconType.plus),
    new ButtonInfo(ButtonType.success, SizeType.small, onRefresh, "刷新", IconType.refresh)
  ],
  operation: [
    new ButtonInfo(ButtonType.primary, SizeType.small, onUpdate, '修改', IconType.edit),
    new ButtonInfo(ButtonType.warning, SizeType.small, onDelete, '删除', IconType.minus),
  ],
  heads: [
    new TableHead("菜单名称", "menuName", TableCellType.data),
    new TableHead("菜单类型", "menuType", TableCellType.state),
    new TableHead("路由层级", "route", TableCellType.data),
    new TableHead("图标", "menuIcon", TableCellType.icon),
    new TableHead("路径", "url", TableCellType.data),
    new TableHead("操作", "operation", TableCellType.operation)
  ],
  searchParam: {
    "pageNum": 1,
    "pageSize": 10,
    "param": {}
  }
}

// 表格内容
const headButtons: ButtonInfo[] = tableJson.headButton;
const ops: ButtonInfo[] = tableJson.operation;
const heads: TableHead[] = tableJson.heads;
const rowList: TableRow[] = [];
const tableContent = new TableContent(heads, rowList);
const tableInfo = ref<TableListPageInfo>(new TableListPageInfo(headButtons, tableContent));

/**
 * 分页查询
 * 举例：
 *  const row2: TableCell[] = [
    new TableCell("name", TableCellType.data, "系统管理"),
    new TableCell("state", TableCellType.data, "1"),
    new TableCell("icon", TableCellType.icon, "ic ic-homepage-fill"),
    new TableCell("url", TableCellType.data, "/system"),
    new TableCell("operation", TableCellType.operation, ops)
  ];
 */
const pageContentInit = () => {
  const dataList: TableRow[] = [];
  const param = tableJson.searchParam;
  param.pageNum = tableInfo.value.page;
  param.pageSize = tableInfo.value.limit;
  // 分页查询
  const apinfo = ApiInfo.getApiInfoAndData(MenuApi.pageList, param);
  Service.post(apinfo).then((res: BackData) => {
    if (res.code === 200 && res.success) {
      const data = res.respData
      // 总数
      tableInfo.value.total = data.total

      //数据
      const arr = data.records;
      for (let index = 0; index < arr.length; index++) {
        const element = arr[index];
        const cellList: TableCell[] = []
        for (const k in element) {
          cellList.push(new TableCell(k, element[k]))
        }
        let operationCell = new TableCell("operation", ops)
        operationCell.type = TableCellType.operation
        cellList.push(operationCell)

        dataList.push(new TableRow((index + 1), cellList))
      }
    }
    tableInfo.value.tableContent.rowList = dataList;
  }).catch((err) => {
    console.log(err)
  })
}

// 钩子函数，打开页面执行
onMounted(() => {
  pageContentInit()
})

// 分页，上一页/下一页
const onCurrentChange = (val: number) => {
  tableInfo.value.page = val;
  pageContentInit()
}

// 修改每个页面限制条数
const onSizeChange = (val: number) => {
  tableInfo.value.limit = val;
  pageContentInit()
}

// 状态转化，数字转对应数据
const onState = (headCode: string, state: any): StateInfo => {
  const info = new StateInfo();
  info.type = "danger";
  info.data = '未知';
  switch (headCode) {
    case 'menuType':
      switch (state) {
        case 0:
          info.type = "success";
          info.data = '菜单';
          break
        case 1:
          info.type = "info";
          info.data = '按钮';
          break
        default:
          break
      }
      break
    default:
      break;
  }
  return info;
}

tableInfo.value.onCurrentChange = onCurrentChange;
tableInfo.value.onSizeChange = onSizeChange;
tableInfo.value.onState = onState;


</script>
<style lang="stylus" scoped></style>
